<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <el-card>
      <div style="text-align: center">
        <video
          ref="myVideo"
          class="video14"
          controls
          preload="none"
          width="80%"
          height="600"
          src="http://120.79.222.59:90/一组演示视频.mp4"
        ></video>
      </div>

      <div>本章答案(教学视频播放完后，显示答案)</div>
      <el-button v-show="this.IsEnded == 1" @click.once="UpWord">
        点击下载本章答案
      </el-button>
    </el-card>
  </div>
</template>
          
<script>
export default {
  created() {
    this.GetAll();
  },
  data() {
    return {
      // 是否视频播放完的状态码
      IsEnded: "",
    };
  },
  methods: {
    // word下载
    UpWord() {
      this.$message.success("下载成功,请勿重复点击");

      window.location.href =
        "http://180.76.111.200:888/1 实验室安全运行专题教育(本章题库）.docx";
    },
    // 获取视频状态
    async GetAll() {
      const { data: res } = await this.$http.post("/api/lookstate");
      // console.log(res);
      // console.log(res.data[0].video14);
      this.IsEnded = res.data[0].video14;
    },
    // 改变视频播放状态
    async ChangState(val) {
      // console.log(val);
      const { data: res } = await this.$http.post("/api/changestate", {
        videostate: val,
      });
      // console.log(res);
      if (res.code == 200) {
        this.$message.success("该视频已看完");
        this.GetAll();
        return;
      }
      this.$message.error("操作异常，请重新观看视频");
    },
  },

  mounted() {
    // 监听视频播放
    this.$refs.myVideo.addEventListener("play", () => {
      // console.log("video is playing");
      // this.openTimer();
    });
    // 监听视频暂停
    this.$refs.myVideo.addEventListener("pause", () => {
      // console.log("video is stop");
      // this.closeTimer();
    });
    // 监听视频结束
    this.$refs.myVideo.addEventListener("ended", () => {
      // console.log("video is ended");
      const val = this.$refs.myVideo._prevClass;
      this.ChangState(val);
    });
  },
};
</script>
    

<style scoped>
</style>
